<!-- 文章编辑页添加标题弹框 -->
<!-- 小瓜子 更新于 2020/08/28 -->

<!-- 小瓜子 更新于 2020/09/02 -->
<!-- 重写组件逻辑 -->

<!-- 小瓜子 更新于 2020/09/06 -->
<!-- 1.添加文章封面图
	 2.将标签展示改为滚动显示 -->
	 
<!-- 小瓜子 更新于 2020/09/09 -->
<!-- 1.修复不能发布文章的bug -->

<!-- 小瓜子 更新于 2020/09/10 -->
<!-- 1.强制添加封面图片 -->
<template>
	<view class="popup_box" :style="'height:' + screenHeight*0.7 + 'px;'">
		<view class="close" @tap="close">×</view>
		<!-- 添加文章标题 -->
		<view class="title"><text>文章标题</text><text style="font-size: 14px; color: #7F7F7F;">必填</text></view>
		<input type="text" class="uni-input" v-model="articleTitle" placeholder="请输入文章标题"/>
		<!-- 添加文章封面图 -->
		<view class="title"><text>文章封面图</text><text style="font-size: 14px; color: #7F7F7F;">必填</text></view>
		<view class="picture_box">
			<view class="picture" v-show="imgList.length != 0">
				<image :src="imgList[0]" mode="aspectFill" @tap="previewImage"></image>
				<text class="inxupt inxupttubiao23 delete" @tap="deletePicture"></text>
			</view>
			<view class="add_picture inxupt inxupttubiao29" v-show="imgList.length == 0" @tap="addPicture"></view>
		</view>
		<!-- 圈子，艾特，标签 -->
		<view class="detail_info">
			<scroll-view scroll-y="true" :style="'height:' + screenHeight*0.3 + 'px;'" >
				<view class="ats" v-if="!communityId && submitForm.atPeopleList[1].length != 0">
					<text>提到了：</text>
					<view class="each_tag" v-for="(item,index) in submitForm.atPeopleList[1]" :key="index">
						@{{item}}
					</view>
				</view>
				<view class="paceWithCommunity" v-if="!communityId && submitForm.selectedCommunity[1].length != 0">
					<text>同步到：</text>
					<view class="each_tag" v-for="(item,index) in submitForm.selectedCommunity[1]" :key="index">
						{{item}}
					</view>
				</view>
				<view class="tags" v-if="!communityId">
					<text>标签：</text>
						<view class="each_tag" v-if="submitForm.myTag">
							#{{submitForm.myTag}}
						</view>
						<view class="each_tag" v-for="(item,index) in submitForm.mainTags" :key="index">
							#{{item.tagName}}
						</view>
				</view>
			</scroll-view>
		</view>
		<button type="default" class="submit_button" @tap="confirm">确认发布</button>
	</view>
</template>

<script>
	import { _ajax } from '../../../in-xupt-functions.js'
	import BaseUrl from '../../../config.js'
	export default {
		props: {
			submitForm: {
				type: Object,
				default: {}
			},
			communityId: {
				type: String,
				default: undefined
			},
			screenHeight: 0,
			screenWidth: 0,
			token: ''
		},
		inject: ['popup'],
		data() {
			return {
				articleTitle: '',
				imgList: [],
				showAdd: true
			}
		},
		methods: {
			close() {
				this.popup.close()
			},
			// 点击添加图片
			addPicture: function () {
				let that = this;
				uni.chooseImage({
					count: 1,
					sourceType: ["album"],
					success(img_url) {
						that.imgList = img_url.tempFilePaths;
						that.showAdd = false;
						that.uploadImg();
						uni.showLoading({
							mask:true,
							title:''
						})
					}
				})
			},
			// 点击图片进行预览
			previewImage: function () {
				uni.previewImage({
					current: this.imgList[0],
					urls: this.imgList
				})
			},
			// 点击图片右上角的X删除图片
			deletePicture: function () {
				this.imgList = [];
				this.showAdd = true;
			},
			// 上传图片函数、method为回调函数，在上传了图片之后请求上传公告内容
			uploadImg: function(method) {
				let _this = this;
				uni.uploadFile({
					url: BaseUrl + '/upload',
					header: {
						'token': _this.$props.token,
					},
					name: 'file',
					filePath: _this.imgList[0],
					success:(res) => {
						// 解析传回的数据（字符串转json）
						let resData = JSON.parse(res.data)
						if (resData.status == 0) {
							// 返回成功则将返回的链接写入图片列表中
							_this.imgList[0] = resData.data;
							// 执行回调函数
							uni.hideLoading()
						}else {
							// 返回错误则显示报错信息
							uni.showToast({
								icon: "none",
								title: res.data.msg
							})
						}
					},
					fail: (err) => {
						uni.hideLoading()
						uni.showToast({
							icon: "none",
							title: "好像除了点问题>_<"
						})
						return
					}
				})
			},
			// 文章发布函数
			uploadArticle(url,data) {
				uni.showLoading({
						title: '正在发布......',
						mask: true
					})
				_ajax({
					url: url,
					method: 'POST',
					data: data
				})
				.then(res => {
					if(res.data.status == 0) {
						uni.hideLoading();
						uni.showToast({
							icon: 'none',
							title: '发布成功！'
						})
						if(this.communityId) {
							uni.fromEdit = true;
							uni.navigateTo({
								url: '../../pages/EachCommuity/EachCommuity?communityId=' + this.communityId,
								animationType: 'slide-in-right',
								animationDuration: 1000
							})
						}else {
							uni.isRefresh = true;
							uni.switchTab({
								url: '../../pages/Interest/Interest',
								animationType: 'slide-in-right',
								animationDuration: 1000
							})
						}
						
					}else {
						uni.hideLoading();
						uni.showToast({
							icon: 'none',
							title: res.data.msg
						})
					}
				})
			},
			// 点击确认发布文章
			confirm() {
				if (/^\s*$/.test(this.articleTitle)) {
					uni.showToast({
						icon:'none',
						title: '请输入文章标题'
					})
					return
				}
				if (!this.imgList[0]) {
					uni.showToast({
						icon:'none',
						title:'请添加封面图片'
					})
					return
				}
				// 在圈子页面发布文章
				if(this.communityId) {
					// 将数组写入一个对象，作为请求的参数
					let commitForm = {
						'body': this.$props.submitForm.articleBody,
						'title': this.articleTitle,
						'pureText': this.$props.submitForm.pureText,
						// 留接口上传封面图片
						'cover': this.imgList[0]
					}
					// 调用发布函数
					this.uploadArticle('/circle/' + this.$props.communityId + '/article',commitForm)
				}else {
					// 新鲜事页面发布文章
					let mainTagIds = [];
					// // 生成主标签数组
					this.$props.submitForm.mainTags.forEach(item => {
						mainTagIds.push(item.id)
					})
					// 将数组写入一个对象，作为请求的参数
					let commitForm = {
						'body': this.$props.submitForm.articleBody,
						'title': this.articleTitle,	
						'atIds': this.$props.submitForm.atPeopleList[0],
						'circleIds': this.$props.submitForm.selectedCommunity[0],
						'mainTagIds': mainTagIds,
						'customTags': [this.$props.submitForm.myTag],
						'pureText': this.$props.submitForm.pureText,
						// 留接口上传封面图片
						'cover': this.imgList[0]
					}
					// 调用发布函数
					this.uploadArticle('/article',commitForm)
				}
			}
		}
	}
</script>

<style lang="less">
	.popup_box {
		background-color: #FFFFFF;
		border-top-left-radius: 5px;
		border-top-right-radius: 5px;
		padding: 20px 0;
		input {
			width: 80%;
			padding: 5px;
			margin: 10px 0 10px 5px;
			margin-left: 5px;
			margin-top: 10px;
			font-size: 14px;
			border-radius: 5px;
			background-color: @g-background;
		}
		.title {
			margin-bottom: 6px;
			margin-left: 10px;
			font-size: 18px;
		}
		.picture_box {
			display: flex;
			justify-content: flex-start;
			flex-wrap: wrap;
			margin-bottom: 5px;
			view {
				width: 80px;
				height: 80px;
				margin-left: 8px;
			}
			.picture {
				box-sizing: border-box;
				border: 2px solid #7f7f7f;
				position: relative;
				
				image {
					width: 100%;
					height: 100%;
					// z-index: 100;
				}
				.delete {
					position: absolute;
					padding: 2px;
					top: 0;
					right: 0;
				}
			}
			.add_picture {
				font-size: 80px;
			}
			.add_picture::before {
				position: relative;
				display: inline-block;
			}
		}
		.close {
			position: absolute;
			top: 15px;
			right: 10px;
			font-size: 24px;
		}
		.detail_info {
			padding-left: 10px;
			.ats,
			.paceWithCommunity,
			.tags {
				// margin-top: 10px;
				padding-top: 10px;
			}
			.each_tag {
				padding: 2px 10px;
				display: inline-block;
				border: 1px solid #333;
				border-radius: 20px;
				color: #333;
				font-size: 14px;
				margin: 5px 7px;
			}
		}
		.submit_button {
			position: fixed;
			bottom: 10px;
			left: 20%;
			width: 450rpx;
			height: 88rpx;
			line-height: 88rpx;
			font-size: 16px;
			color: #FFFFFF;
			border-radius: 10rpx;
			background-color: @g-pink;
		}
	}
</style>
